<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="font-size: 20px;color: brown;text-align: center;">仔细阅读哦</div>
    <div class="box1" style="text-align: center;">上课不玩手机</div>
    <p style="text-align: center;">前端课题真好玩</p>
    <p style="text-align: center;">菜就别玩</p>
    <div id="box">
                <p class="box" style="text-align: center;">有菜又爱玩</p>
    </div>
</body>
<script>
    console.log("------------------------");
    //let const
    //选择器:标签选择器  id选择器  类选择器
    //querySelector()获取第一个元素
    const elm1=document.querySelector('p');//通过标签选择
    console.log(elm1);
    const elm2=document.querySelector('#box');//通过id名选择
    console.log(elm2);
    const elm3=document.querySelector('.box1');//通过类名选择
    console.log(elm3);
    //获取所有的元素
    const elm01=document.querySelectorAll('div');
    console.log(elm01);
    console.log("------------------------");
    //想遍历数组一样遍历elm01.
    //通过遍历伪数组elm01能获得指定位置的元素
    for(let i=0;i<elm01.length;i++){
        console.log(elm01[i]);
    }
    elm01[1].style.color='green';
    //获取子元素
    const son=document.querySelector('#box p');
    console.log(son);
    elm1.style.color='red';
</script>
</html>